<template>
  <div>
    <input type="text" v-model="count" @blur="change" />
    <input type="text" v-model="price" />
    <input type="text" v-model="num" />
    总价：{{ total }}
  </div>
</template>

<script setup>
/**
 * data(), --->使用ref来定义变量
 * methods --->使用函数表达式
 * computed --->使用computed函数
 * watch --->使用watch函数
 * created() --->create, mount,update destory,共8个钩子函数，常用的是created,mounted
 * mounted --->setup函数默认是created
 * props --->父传子 defineProps()
 * components --->注册子组件，默认自动注册，这个选项在组合式api中可以直接删除
 *
 */
import { ref, computed, watch } from 'vue'

//data()==>使用ref进行定义具有相应式的变量
let count = ref(10)
let price = ref(10.2)
let num = ref(12)
//使用函数表达式来定义methods
const change = () => {
  console.log(count.value)
}
const total = computed(() => {
  return price.value * num.value
})
//watch
watch(price, (newV, oldV) => {
  console.log(newV, oldV)
})
</script>

<style lang="scss" scoped></style>
